import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Tree, Space, Table, Tag } from 'antd';
import './style.less';
export default function Index() {
  const [tableData, setTableData] = useState([
    {
      id: 1,
      name: '产品资料',
      chid: [
        {
          id: 1,
          type: '产品资料',
          filename: '本年度工作情况汇报',
          uploaduser: '张三',
          uploadtime: new Date().getHours() + ':' + new Date().getMinutes(),
          sharewho: '111',
        },
      ],
    },
    {
      id: 2,
      name: '销售制度',
      chid: [
        {
          id: 1,
          type: '销售制度',
          filename: '本年度工作情况汇报',
          uploaduser: '张三',
          uploadtime: new Date().getHours() + ':' + new Date().getMinutes(),
          sharewho: '111',
        },
      ],
    },
    {
      id: 3,
      name: '工作笔记',
      chid: [
        {
          id: 1,
          type: '工作笔记',
          filename: '本年度工作情况汇报',
          uploaduser: '张三',
          uploadtime: new Date().getHours() + ':' + new Date().getMinutes(),
          sharewho: '111',
        },
      ],
    },
  ]);
  const [tableData2, setTableData2] = useState();
  // 左侧级联选择回调
  const onSelect = (selectedKeys, info) => {
    if (info.node.key * 1 === 0) {
      setTableData2(tableData);
      return;
    }
    tableData.map((item) => {
      if (item.id === info.node.key * 1) {
        setTableData2([item]);
      }
    });
  };
  const treeData = [
    {
      title: '文档中心',
      key: '0',
      children: [
        {
          title: '产品资料',
          key: '1',
        },
        {
          title: '营销制度',
          key: '2',
        },
        {
          title: '工作笔记',
          key: '3',
        },
      ],
    },
  ];
  const columns = [
    {
      title: '所属类别',
      dataIndex: 'type',
      key: 'type',
      render: (_, record) => <Space>{record.chid[0].type}</Space>,
    },
    {
      title: '文档名称',
      dataIndex: 'filename',
      key: 'filename',
      render: (_, record) => <Space>{record.chid[0].filename}</Space>,
    },
    {
      title: '上传人员',
      dataIndex: 'uploaduser',
      key: 'uploaduser',
      render: (_, record) => <Space>{record.chid[0].uploaduser}</Space>,
    },
    {
      title: '上传时间',
      dataIndex: 'uploadtime',
      key: 'uploadtime',
      render: (_, record) => <Space>{record.chid[0].uploadtime}</Space>,
    },
    {
      title: '共享给谁',
      dataIndex: 'sharewho',
      key: 'sharewho',
      render: (_, record) => <Space>{record.chid[0].sharewho}</Space>,
    },

    {
      title: '',
      dataIndex: 'sharewho',
      key: 'sharewho',
      render: (_, record) => (
        <Space>
          <a href="">查看</a>
        </Space>
      ),
    },
    {
      title: '',
      dataIndex: 'sharewho',
      key: 'sharewho',
      render: (_, record) => (
        <Space>
          <a href="">下载</a>
        </Space>
      ),
    },
    {
      title: '',
      dataIndex: 'sharewho',
      key: 'sharewho',
      render: (_, record) => (
        <Space>
          <a href="">共享</a>
        </Space>
      ),
    },
  ];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  return (
    <div className="myData">
      <div className="myDataLeft">
        <Tree
          defaultExpandAll
          showLine
          switcherIcon={<DownOutlined />}
          defaultExpandedKeys={['0-0-0']}
          onSelect={onSelect}
          treeData={treeData}
        />
      </div>
      <div className="myDataRight">
        <div className="MDRTop">
          <button>新增</button>
          <button>修改</button>
          <button>删除</button>
          <button>移动</button>
          <div className="MRTSearch">
            <span>名称：</span>
            <input type="text" />
            <button>查询</button>
          </div>
          <button>查看日志</button>
        </div>
        <div className="MDRBottom">
          <div className="MDTable">
            <Table
              rowKey={(columns) => columns.id}
              columns={columns}
              bordered
              rowSelection={{ ...rowSelection }}
              dataSource={tableData2}
            />
          </div>
          <div className="MDPagination"></div>
        </div>
      </div>
    </div>
  );
}
